<template>
  <div class="orderlist" :style="{paddingTop: scrollerPadTop}">
    <div class="items" v-for="(item, index) in orderData" :key="index" v-if="orderData.length > 0">
      <div class="zhunshi" :class="[item.isZhunShi == '1'? '': 'yanchi']" v-if="item.status_num == 4">{{item.isZhunShi == '1'? '准时': '延迟'}}</div>
      <div class="status" v-if="!typeIndex">
        <img src="../../static/img/daiqiangdan1.png" v-if="item.status_num == 1" />
        <img src="../../static/img/daiquhuo3.png" v-else-if="item.status_num == 2" />
        <img src="../../static/img/songhuozhong.png" v-else-if="item.status_num == 3" />
        <img src="../../static/img/yiwancheng.png" v-else-if="item.status_num == 4" />
        <img src="../../static/img/yiquxiao.png" v-else-if="item.status_num == 5" />
      </div>
      <div
        class="title vux-1px-b flex flex-middle flex-space-between"
        :style="{paddingLeft: !typeIndex ? '0.35rem': '0.12rem'}"
      >
        <div><b>{{ item.time }}</b></div>
        <div>
          <span class="car-name">{{ item.cartype }}</span>
          <span class="car-name" v-if="item.yjhj == 1">一键呼叫</span>
        </div>
      </div>
      <div class="address vux-1px-b" @click="toOrderDetails(item.status, item.id, item.other_uid)">
        <div class="addresslist overflowtext flex flex-middle">
          <i class="icon icon-quan1"></i><span>{{item.laddr}}{{item.laddr_more}}</span>
        </div>
        <div class="addresslist overflowtext flex flex-middle">
          <i class="icon icon-quan1"></i><span>{{item.raddr}}</span>
        </div>
        <div style="padding-left: 0.45rem; line-height: 0.5rem;">{{item.yjhj == 1? '调度费': '运费'}} <b class="text-orange">{{item.money}}</b>元</div>
      </div>
      <div class="actions flex flex-space-between flex-middle" v-if="item.status_num == 1">
        <div>
        </div>
        <div>
          <x-button @click.native="handleCancelOrder(item.id, 'xunjia')" type="primary" action-type="button" mini>取消运单</x-button>
        </div>
      </div>
      <div class="actions flex flex-space-between flex-middle" v-if="item.status_num == 2">
        <div></div>
        <div>
          <x-button type="primary" action-type="button" class="out-line" mini @click.native="toPay(item.num)">支付运费</x-button>
          <x-button type="primary" action-type="button" class="out-line" mini @click.native="toPathFollowing(item.id, 'now')">路径跟踪</x-button>
          <x-button type="primary" action-type="button" @click.native="handleCancelOrder(item.id, 'yundan')" mini>取消运单</x-button>
        </div>
      </div>
      <div class="actions flex flex-space-between flex-middle" v-if="item.status_num == 3">
        <div></div>
        <div>
          <x-button type="primary" action-type="button" class="out-line" mini @click.native="toPathFollowing(item.id, 'now')">路径跟踪</x-button>
        </div>
      </div>
      <div class="actions flex flex-space-between flex-middle" v-if="item.status_num == 4">
        <div></div>
        <div>
          <x-button type="primary" action-type="button" class="out-line" mini @click.native="toPathFollowing(item.id)">路径回放</x-button>
          <x-button type="primary" action-type="button" mini @click.native="handleComment(item.id)" v-if="item.commentType == 0">评论</x-button>
          <x-button type="default" action-type="button" mini v-if="item.commentType == 1">已评论</x-button>
        </div>
      </div>
      <div class="actions flex flex-space-between flex-middle" v-if="item.status_num == 5">
        <div></div>
        <div>
          <x-button type="primary" action-type="button" class="out-line" @click.native="handleAgain(item.id)" mini>重派此单</x-button>
          <x-button type="primary" action-type="button" mini @click.native="handleComment(item.id)" v-if="item.commentType == 0">评论</x-button>
          <x-button type="default" action-type="button" mini v-if="item.commentType == 1">已评论</x-button>
        </div>
      </div>
    </div>



  </div>
</template>
<script>

export default{
  computed: {
    scrollerPadTop() {
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      return isAndroid? '0.15rem': '0rem'
    }
  },
  props: ['orderData', 'typeIndex', 'type'],
  methods: {
    //取消询价 , 取消运单
    handleCancelOrder(oid, cancelType) {
      this.$emit('cancel-order', oid, cancelType)
    },
    //重新招标
    handleAgain(oid) {
      this.$emit('again', oid)
    },
    toOrderDetails(status, oid, other_uid) {
      this.$router.push({name: 'expressInDispatch', query: {oid, other_uid, type: this.type}})
    },
    toPathFollowing(oid, status = ''){
      this.$router.push({path: '/pathFollowing', query: {type: this.type, oid, status}})
    },
    handleComment(oid) {
      this.$emit('comment', oid)
    },
    toPay(num) {
      this.$router.push({path: '/payForDriver', query: {num}})
    }
  }
}
</script>

<style scoped>
  .orderlist{
    color: #5e5e5e;
  }
  .orderlist .items{
    margin-top: 0.15rem;
    background: #fff;
    padding: 0rem 0.2rem;
    position: relative;
    overflow-y: auto;
  }
  .orderlist .title{
    height: 0.9rem;
    padding-left: 0.35rem;
  }
  .address{
    padding: 0.1rem;
  }
  .addresslist{
    height: 0.5rem;
    overflow: hidden;
    width: 6.2rem;
  }
  .cartag{
    padding: 0.1rem 0.15rem;
    background: #ebebeb;
    color: #a1a1a1;
    font-size: 0.24rem;
  }
  .addresslist .icon{
    font-size: 0.3rem;
    color: #2fa42c;
    display: inline-block;
    width: 0.45rem;
  }
  .addresslist:first-of-type .icon{
    color: #ff5722;
  }
  .orderlist .actions{
    padding: 0.1rem;
    text-align: right;
  }
  .out-line{
    border:1px solid #ff5722;;
    background: #fff;
    color: #ff5722;;
  }
  .actions .weui-btn_mini{
    margin-left: 0.04rem;
  }
  .weui-btn_mini{
    padding: 0rem 0.15rem !important;
  }
  .status{
    position: absolute;
    left:0;
    top:0;
    width: 0.8rem;
    height: 0.8rem;
    z-index: 2;
  }
  .status img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .weui-btn + .weui-btn{
    margin-top: 0rem !important;
  }

</style>
